<template>
    <div>
        <a-modal
         v-model="visible" 
         title="缺陷依据" 
         @ok="handleOk" 
         @cancel="handleCancel" 
         class="onSiteInspection-chooseTerms-modal"
         :dialogStyle="{top:'20px'}"
         :footer="null"
         width="60%"
        >
            <div class="onSiteInspection-chooseTerms-box" :key="chooseTermsKey">
                <div class="chooseTerms-item">
                    <div class="chooseTerms-left" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <span class="title">已选缺陷依据</span>
                        <a-button size="small" class="blue-btn" type="primary" @click="addSelectTerm" >手动输入条款</a-button>
                    </div>
                    <div class="chooseTerms-right">
                        <commpVxeTable
                            :key="selectTKKey"
                            ref="problemTableRef"
                            :isCanWrap="true"
                            :config="selectTKConfig" 
                            :columns="selectTKColumnsVxe" 
                            :formItem="[]"
                            tablePadding="0"
                        >
                            <template v-slot:tk_name="{row}">
                                <div style="display: flex;align-items: center;">
                                    <a-icon @click="addSelectTerm(row)" style="font-size: 18px; color: #5ca3e5;padding-right: 8px;"type="form" />
                                    <span>{{ row.tk }}</span>
                                </div>
                            </template>
                            <template v-slot:operation_btn="{row}">
                                <a-form layout="inline" class="search-form" >
                                    <a-form-item>
                                        <a-button size="small" class="red-btn" type="primary" @click="deletionClick(row)" icon="delete">删除</a-button>
                                    </a-form-item>
                                </a-form>
                            </template>
                        </commpVxeTable>
                    </div>
                </div>
                <div class="chooseTerms-item" style="margin-top: 10px;">
                    <div class="chooseTerms-left tree-box">
                        <div style="margin: 5px 0;">
                            <a-input-search
                                placeholder="请输入依据名称"
                                enter-button="搜索"
                                size="large"
                                v-model:value="gjzValue"
                                @search="onSearch"
                            />
                        </div>
                        <a-spin tip="正在加载中..." :spinning="tableSpinning">
                            <vxe-table
                                class="tree-vxetable-box"
                                :key="treeTypeKey"
                                resizable
                                ref="xTree"
                                row-id="id"
                                :show-header="false"
                                :tree-config="{rowField: 'id', parentField: 'parentid',iconClose:'vxe-icon-square-plus-fill',iconOpen:'vxe-icon-square-minus-fill',expandRowKeys: defaultExpandKeys}"
                                :radio-config="{labelField: 'title',}"
                                :data="treeTypeList"
                                :row-config="{isCurrent: true, isHover: true}"
                                @current-change="currentChangeEvent"
                                @cell-click="cellClick"
                            >
                            <!-- @click="$refs.xTree.clearCurrentRow()" -->
                                <vxe-column field="title" title="name" tree-node>
                                    <template #default="{ row }">
                                        <span>
                                            <template >
                                                <a-icon v-if="!row.parentid || (row.children && row.children.length)" style="font-size: 16px;color: #ffa500;" :type="$refs.xTree.isTreeExpandByRow(row) ? 'folder-open' : 'folder'" theme="filled"></a-icon>
                                                <a-icon v-else type="file" style="font-size: 16px;color: #ffa500;" />
                                            </template>
                                            <span>{{ row.title }}</span>
                                        </span>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </a-spin>
                    </div>
                    <div class="chooseTerms-right">
                        <commpVxeTable
                            :key="chooseTermsRightKey"
                            ref="chooseTermsRighRef"
                            :isCanWrap="true"
                            :config="chooseTermsRightConfig" 
                            :columns="chooseTermsRightColumnsVxe" 
                            :formItem="[]"
                            tablePadding="0"
                            @checkboxChange="checkboxChange"
                        >
                            <template v-slot:fzdyzh_fzdyznr="{row}" >
                                {{ row.fzdyzh }} &nbsp;&nbsp;{{ row.fzdyznr }}
                            </template>
                        </commpVxeTable>
                    </div>
                </div>
            </div>
            <a-modal
                :title="modalData.title"
                :visible="manualAddVisible"
                @ok="manualAddOk"
                @cancel="manualAddCancel"
            >
                <div class="tknr-content-box" >
                    <span class="title">
                        <span class="tips-text">*</span>
                        条款内容:
                    </span>
                    <a-textarea 
                        v-model:value="modalData.ffgtk"
                        placeholder="请输入条款内容"
                        :autosize="{ minRows: 2, maxRows: 2 }"
                    ></a-textarea>
                </div>
            </a-modal>
        </a-modal>
    </div>
</template>
<script>
import {
    flfgqueryZjTreeList,
    flfgqueryTkList,
    spcyaddXcjcwttk,
    spcysdWttk,
    spcydeleteXcjcwttk,
    spcyxgWttk,
} from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import { PageSizes } from 'pdf-lib';
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            currentData:{},
            chooseTermsKey:null,
            treeTypeList:[],
            currentGlData:{},
            treeTypeKey:null,
            tableSpinning:false,
            chooseTermsRightBottomSpinning:false,
            chooseTermsRightKey:null,
            windowInnerHeight:window.innerHeight,
            chooseTermsRightConfig:{
                api:assessCheckApi.flfgqueryTkList,
                rowId: 'id',
                height:window.innerHeight - 375,
                pageSize:30,
                paramet:{
                }
            },
            chooseTermsRightColumnsVxe:[{
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },{
                title: '依据名称',
                field: 'fzdyznr',
                slots: {
                    default: 'fzdyzh_fzdyznr',
                },
                align:'left',
            }],
            chooseTermsRightList:[],
            currentTreeD:{},
            YCurrentTreeD:{},
            currentSelectTKD:{},
            selectTKKey:null,
            selectTKConfig:{
                api:assessCheckApi.flfgqueryWttkList,
                rowId: 'id',
                height:160,
                autoHidden:true,
                pageSize:100000,
                paramet:{
                }
            },
            selectTKColumnsVxe:[{
                title: '依据名称',
                field: 'tk',
                align:'left',
                slots: {
                    // 使用插槽模板渲染
                    default: 'tk_name',
                },
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:182
            }],
            manualAddVisible:false,
            ffgtk:'',
            gjzValue:'',
            modalData:{},
            defaultExpandKeys:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            this.gjzValue = ''
            this.currentData = row
            this.selectTKConfig.paramet = {fxcjcwtid:row.wt.id}
            this.selectTKKey = Date.now()
            this.tableSpinning = true
            this.getTreeData(1)
        },
        KeyDownChange(){
            this.chooseTermsRightConfig.height = window.innerHeight - 375
        },
        getTreeData(val){
            flfgqueryZjTreeList({id:this.currentData.id,sqsxid:this.currentData.sqsxid,gjz:this.gjzValue}).then(res=>{
                if(res.code == 200){
                    //console.log('我获得章节树什么结构？',res)
                    this.treeTypeList = res.result
                    let num  = 0
                    res.result.forEach((item,index) => {
                        if(item.children.length && num >= index){
                            //console.log(index)
                            //console.log(index)
                            num = index
                            this.getTkData(item.children[0])
                        }
                    });
                    if(val){
                        this.defaultExpandKeys = [this.treeTypeList[0].id]
                    }
                    //console.log('现在在哪一项',num)
                    this.$nextTick(()=>{
                        setTimeout(()=>{
                            this.$refs.xTree.setCurrentRow(this.treeTypeList[num].children[0])
                            // this.$refs.xTree.setAllTreeExpand(true) //展开树的所有项
                        },200)
                    })
                    
                }else{
                    this.treeTypeList = []
                }
                this.tableSpinning = false
                this.chooseTermsKey = Date.now()
                this.treeTypeKey = Date.now()
            })
        },
        onSearch(val){
            this.gjzValue = val
            this.getTreeData()
            //console.log('搜索',val)
        },
        checkRowMethod({row}){
            //console.log('什么A',row)
            return false
        },
        getTkData(row){
            //console.log('我获取不到项',row)
            this.currentTreeD = row
            this.YCurrentTreeD = JSON.parse(JSON.stringify(row))
            this.chooseTermsRightConfig.paramet = {
                id:row.id,
                gjz:this.gjzValue,
            }
            this.chooseTermsRightKey = Date.now()
        },
        checkboxChange(list){
            //console.log('88888888888',list)
            
            if(list.length){
                let row = list[list.length-1]
                //console.log('什么数据',this.currentData)
                spcyaddXcjcwttk({sqsxid:this.currentData.sqsxid,fxcjcwtid:this.currentData.wt.id,ftkid:row.id}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.selectTKKey = Date.now()
                        this.$emit('chooseTermsSuccess')
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.$refs.chooseTermsRighRef.searchEvent()
                })
            }
        },
        currentChangeEvent({row}){
            //console.log('获取高亮行',row)
            // if(!row.children || (row.children && !row.children.length)){
                this.getTkData(row)
            // }else{
            //     //console.log(this.YCurrentTreeD)
            //     this.$refs.xTree.clearCurrentRow()
            //     this.$refs.xTree.setCurrentRow(this.YCurrentTreeD)
            // }
            
        },
        cellClick({row}){
            this.$refs.xTree.setCurrentRow(this.YCurrentTreeD)
            //console.log('我选中什么1',row)
            return false
        },
        deletionClick(row){//
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcydeleteXcjcwttk({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.selectTKKey = Date.now()
                            that.$emit('chooseTermsSuccess')
                        }else{
                            that.$message.warning(res.message)
                        }              
                    })
                },
                
            });
        },
        handleOk(){

        },
        handleCancel(){
            this.visible = false
        },
        addSelectTerm(row){
            //console.log(row)
            if(row){
                this.modalData = {...row,title:'修改条款条款',ffgtk:row.tk}
                this.manualAddVisible = true
            }else{
                this.modalData = {title:'手动输入添加条款'}
                this.manualAddVisible = true
            }
            
        },
        manualAddOk(){
            if(!this.modalData.ffgtk){
                this.$message.warning('请输入条款内容')
                return
            }
            if(this.modalData.id){
                let data = {
                    ffgtk:this.modalData.ffgtk,
                    id:this.modalData.id,
                    sqsxid:this.currentData.sqsxid,
                    fxcjcwtid:this.currentData.wt.id,
                }
                spcyxgWttk(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.selectTKKey = Date.now()
                        this.$emit('chooseTermsSuccess')
                        this.manualAddVisible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.$refs.chooseTermsRighRef.searchEvent()
                })
            }else{
                spcysdWttk({sqsxid:this.currentData.sqsxid,fxcjcwtid:this.currentData.wt.id,ffgtk:this.modalData.ffgtk}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.selectTKKey = Date.now()
                        this.$emit('chooseTermsSuccess')
                        this.manualAddVisible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.$refs.chooseTermsRighRef.searchEvent()
                })
            }
        },
        manualAddCancel(){
            this.manualAddVisible = false
        },
    }
}
</script>
<style lang="less">
.onSiteInspection-chooseTerms-modal{
    .ant-modal-body{
        padding: 8px;
        height: calc(100vh - 100px);
        // overflow-y: auto
    }
}
.onSiteInspection-chooseTerms-box{
    .chooseTerms-item{
        display: flex;
        border: 1px solid #d9d9d9;
        padding: 5px;
        .chooseTerms-left{
            width: 220px;
            .title{
                font-size: 18px;
                font-weight: 600;
            }
            .vxe-table--render-default .vxe-body--column:not(.col--ellipsis), .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis), .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
                padding: 5px 0 !important;
            }
        }
        .tree-box{
            height: calc(100vh - 323px);
            overflow-y: auto;
            .ant-input-lg{
                height: 30px !important;
            }
        }
        .chooseTerms-right{
            flex: 1;
            margin-left: 15px;
        }
    }
}
.tknr-content-box{
    display: flex;
    align-items: flex-start;
    
    .title{
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 5px;
        padding: 8px 6px;
        background-color: #e6f7ff;
        line-height: 30px;
        width: 130px;
        text-align: right;
        margin-right: 10px;
    }
    .tips-text{
        color: #ed5565;
        font-size: 18px;
        padding-top: 3px;
        padding-right: 3px
    }
}
</style>